import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Multiplex from '../../../../CreateImages/Multiplex';
import './index.css';

// 定义一个功能组件来展示标签按钮
const TabButton = ({ active, onClick, children }) => (
  <button
    onClick={onClick}
    style={{
      padding: '10px 20px',
      backgroundColor: '#fff',
      border: 'none',
      borderBottom: active ? '2px solid #0773fc' : '2px solid #fff',
      color: active ? '#1b2337' : '#505a71',
      fontWeight: active ? '800' : '200',
      margin: '0 5px',
    }}
  >
    {children}
  </button>
);

// 主应用组件
const App = () => {
  // 使用状态管理当前激活的标签页索引
  const [activeTab, setActiveTab] = useState(0);
  // 管理从服务器获取的数据列表
  const [lists, setLists] = useState([]);
  // 控制是否显示所有项
  const [showAll, setShowAll] = useState(false);
  // 记录用户选择的类别索引
  const [selectedCategory, setSelectedCategory] = useState(null);

  // 使用副作用钩子来异步获取数据
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/Imagetab');
        const createWhole = response.data.data.CreateWhole;
        setLists(createWhole.map(section => section.children));
      } catch (error) {
        console.error('Failed to fetch data:', error);
      }
    };
    fetchData();
  }, []); // 空数组依赖意味着此效果只在组件挂载时运行一次

  // 处理点击“全部”时的行为
  const handleShowAllClick = index => {
    setSelectedCategory(index);
    setShowAll(true);
  };

  // 返回上一级视图
  const handleReturnClick = () => {
    setSelectedCategory(null);
    setShowAll(false);
  };
  const MasonryLayout = ({ arr }) => (
    <div className="masonry-grid">
      {arr.map((item, index) => (
        <div key={index} className="masonry-grid-item">
          <img src={item}  alt="draggable" draggable onDragStart={(e) => ondragstart(e, item)} style={{ cursor: 'move' }} />
        </div>
      ))}
    </div>
  );
  // 渲染不同的标签页内容
  const renderTabsContent = () => {
    if (activeTab === 0) {
      if (showAll && selectedCategory !== null) {
        return (
          <>
            <span onClick={handleReturnClick} style={{ cursor: 'pointer', marginBottom: '10px', display: 'block' }}>返回</span>
            <MasonryLayout arr={lists[selectedCategory]} />
          </>
        );
      } else {
        return lists.map((section, index) => (
          <div key={index} className='w-child'>
            <div className='w-child-box'>
              <p>{['夏天', '花海', '科技', '天空', '露营', '城市', '森林', '背景', '山水如画'][index]}</p>
              <span onClick={() => handleShowAllClick(index)} style={{ cursor: 'pointer' }}>全部</span>
            </div>
            {/* // 只显示前三个元素作为示例 */}
            <Multiplex arr={section.slice(0, 3)} />
          </div>
        ));
      }
    }

    if (activeTab === 1) {
      return <div>我的收藏</div>;
    }

    if (activeTab === 2) {
      return <div>我的购买</div>;
    }

    return null;
  };

  return (
    <div className='e-boxx'>
      <div className='setdata'>
        <div style={{ marginBottom: '20px' }}>
          <TabButton active={activeTab === 0} onClick={() => setActiveTab(0)}>推荐图片</TabButton>
          <TabButton active={activeTab === 1} onClick={() => setActiveTab(1)}>我的收藏</TabButton>
          <TabButton active={activeTab === 2} onClick={() => setActiveTab(2)}>我的购买</TabButton>
        </div>
        <div className='n-tabs'>
          {renderTabsContent()}
        </div>
      </div>
    </div>
  );
};

export default App;
